<template>
    <div>
        <template v-if="renderType === 'normal'">
            <template v-if="column.tooltip">
                <Tooltip transfer :content="row[column.key]" :theme="tableRoot.tooltipTheme" :disabled="!showTooltip" :show-lazy="true" :max-width="300" class="ivu-table-cell-tooltip">
                    <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
                </Tooltip>
            </template>
            <span v-else>{{row[column.key]}}</span>
        </template>
    </div>
</template>
<script>
    import Tooltip from '../tooltip/tooltip.vue';

    export default {
        name: 'TableCell',
        components: { Tooltip },
        inject: ['tableRoot'],
        props: {
            row: Object,
            column: Object
        },
        data () {
            return {
                renderType: 'normal',
                uid: -1,
                context: this.$parent.$parent.$parent.currentContext,
                showTooltip: false,  // 鼠标滑过overflow文本时，再检查是否需要显示
            };
        },
        methods: {
            handleTooltipIn () {
                const $content = this.$refs.content;
                this.showTooltip = $content.scrollWidth > $content.offsetWidth;
            },
            handleTooltipOut () {
                this.showTooltip = false;
            }
        }
    };
</script>
